<!--suppress ALL -->
<script lang="ts">
export default {
  name: "RepoCompEntityTable"
}
</script>

<template>
  <!-- 数据表单 -->
  <el-table
    ref="dataTableRef"
    v-loading="false"
    :data="dataState.entityList"
    border
    highlight-current-row
  >
    <!-- 展开列表 -->
    <el-table-column type="expand">
      <template #default="props">
        <el-input v-model="props.row.compParamJson" :autosize="{ minRows: 3, maxRows: 100 }" :readonly="true"
                  type="textarea"/>
      </template>
    </el-table-column>

    <!-- 列表 -->
    <el-table-column label="设备厂商" min-width="150" prop="compParam.manufacturer"/>
    <el-table-column label="设备型号" min-width="150" prop="compParam.deviceType"/>
    <el-table-column label="云端属组" min-width="150" prop="compParam.groupName"/>
    <el-table-column :formatter="formatDate4elTableColumn" label="下载版本" prop="createTime" width="180"/>
    <el-table-column :formatter="formatDate4elTableColumn" label="更新时间" prop="updateTime" width="180"/>

    <!-- 上传对话框/下载对话框 -->
    <el-table-column align="center" label="操作" width="200">
      <template #default="scope">
        <el-button :icon="Refresh" circle plain type="primary" @click.stop="handleSynchDialog(scope.row)"/>
        <el-button :disabled="scope.row.compParam.compId === undefined"
                   :icon="Upload" circle plain type="primary"
                   @click.stop="handleUploadDialog(scope.row)"
        />
        <el-button :icon="Delete" circle plain type="danger" @click.stop="handleDeleteDialog(scope.row)"/>
        <el-button :icon="ArrowRight" circle plain type="primary" @click.stop="handleDetailPage(scope.row)"/>
      </template>
    </el-table-column>

  </el-table>

  <!-- 分页工具条 -->
  <pagination v-if="dataState.total > 0" v-model:limit="dataState.queryParams.pageSize"
              v-model:page="dataState.queryParams.pageNum" :total="dataState.total"
              @pagination="handleQuery"/>
</template>

<script lang="ts" setup>
import {onMounted, reactive, toRefs} from "vue";
import {useRouter} from "vue-router";

import {
  RepoCompEntity,
  RepoCompQueryParam,
} from "@/api/repo/comp/local/types";
import {
  listCompEntityList,
} from "@/api/repo/comp/local";
import {Refresh, ArrowRight, More, Edit, Delete, Upload} from '@element-plus/icons-vue';
import {formatDate4elTableColumn, formatDate4elTableColumn2} from '@/utils/formatter';
import {formatFileSize4elTableColumn, formatFileSize4elTableColumn2} from '@/utils/fileutil';


const emit = defineEmits(['rowClick', 'update', 'delete', 'upload', 'sync']);// 定义组件的事件通知
const router = useRouter();

/**
 * 对外声明接口：父页面可以调用它
 */
defineExpose({refreshTable});

// 数据状态：定义
let dataState = reactive({
  // 页面转载状态
  loading: false,
  // 记录总数
  total: 0,
  // 组件仓库
  compRepo: '',
  // 组件类型
  compType: '',
  // 实体数据
  entityList: [] as RepoCompEntity[],
  // 查询参数
  queryParams: {pageNum: 1, pageSize: 10} as RepoCompQueryParam,
});

function handleSynchDialog(row: any) {
  emit('sync', row);
}

function handleUploadDialog(row: any) {
  emit('upload', row);
}

function handleDeleteDialog(row: any) {
  emit('delete', row.id);
}

function handleDetailPage(row: any) {
  router.push('/repo-comp/local/jsn-decoder/model-list?compId=' + row.id);
}

/**
 * 刷新表单
 */
function refreshTable(queryParams: RepoCompQueryParam) {
  dataState.queryParams = queryParams;

  handleQuery();
}

/**
 * 刷新页面信息
 */
function handleQuery() {
  dataState.queryParams.compRepo = dataState.compRepo;
  dataState.queryParams.compType = dataState.compType;
  listCompEntityList(dataState.queryParams).then(({data}) => {
    let entityList = [];
    for (let value of data.list) {
      let compParam = value.compParam as any;
      if (compParam.installVersion !== undefined) {
        value.createTime = compParam.installVersion.updateTime;
      } else {
        value.createTime = 0;
      }
      value.compParamJson = JSON.stringify(value.compParam, null, 5);

      entityList.push(value);
    }

    dataState.entityList = entityList;
    dataState.total = data.total;
  });
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
  dataState.compRepo = 'local';
  dataState.compType = 'jsn-decoder';

  // 查询实体数据
  handleQuery();
});

</script>
